<template>
  <div style="width: 100%; height: 100%">
    <div class="until_title">监控预警</div>

    <div class="clear warning-title" style="margin-top: -10px">
      <p class="left">实时播报</p>
      <p class="right">{{time}}</p>
    </div>

    <broadcast></broadcast>

    <div class="warning-title mt15">
      <p>今日异常</p>
    </div>
    <div class="warning-today">
      <div class="left warning-today-bar" ref="warningTodayBar"></div>
      <div class="left warning-today-start"  ref="warningTodayStart"></div>
    </div>

    <div class="warning-title mt20 mb10">
      <p>近7天预警变化趋势</p>
    </div>
    <div style="width: 100%; height: 160px" ref="changeWarning"></div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import earlyWarning from './earlyWarning.js'
  import warningTodayBar from './warningTodayBar.js'
  import warningTodayStart from './warningTodayStart.js'
  export default {
    name: 'warning',
    components: {
      broadcast (resolve) {
        require(['./broadcast.vue'], resolve)
      }
    },
    data () {
      return {
        time: '',
        todayAlarm: {}
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.initData()
        }
      }
    },
    mixins: [earlyWarning, warningTodayBar, warningTodayStart],
    mounted () {
      this.setTime()
      this.$nextTick(() => {
        this.query()
        if (!this.warningInteeval) {
          this.warningInteeval = setInterval(() => {
            this.query()
          }, 1000 * 60 * this.$pollingTime)
        }
      })
    },
    activated () {
      this.initData()
    },
    methods: {
      query () {
        this.getScreenAlarmTrend()
        this.initData()
      },
      initData () {
        this.getScreenTodayAlarm().then(() => {
          this.initTodayBar()
          this.initTodayStartg()
        })
      },
      setTime () {
        this.time = this.$moment().format('HH:mm')
        setInterval(() => {
          this.time = this.$moment().format('HH:mm')
        }, 1000)
      },
      getScreenTodayAlarm () {
        return new Promise((resolve) => {
          const data = {
            'stageId': this.currentUser.stageId,
            'pjId': this.currentUser.pjId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/screen/getScreenTodayAlarm`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            this.todayAlarm = res.data.data
            resolve()
          })
        })
      }
    }
  }
</script>

<style scoped lang='scss'>
  .warning-title{
    font-size: 16px;
    color: #00e8ff;
  }
  .warning-today{
    width: 100%;
    height: 130px;
    .warning-today-bar{
      width: 130px;
      height: 100%;
    }
    .warning-today-start{
      width: 292px;
      height: 100%;
    }
  }
</style>
